<template>
  <div class="login-page">
    <el-card class="login-card" shadow="hover">
      <h2 class="title">欢迎</h2>
      <el-tabs v-model="activeTab" @tab-click="resetForm">
        <el-tab-pane label="登录" name="login">
          <el-form :model="form" status-icon>
            <el-form-item label="用户名" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
              <el-input v-model="form.username" placeholder="输入用户名"></el-input>
            </el-form-item>

            <el-form-item label="密码" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
              <el-input v-model="form.password" type="password" placeholder="输入密码"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="handleLogin" :loading="loading" style="width: 100%">登录</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="注册" name="register">
          <el-form :model="registerForm" status-icon>
            <el-form-item label="用户名" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
              <el-input v-model="registerForm.username" placeholder="输入用户名"></el-input>
            </el-form-item>

<!--            <el-form-item label="邮箱" :rules="[{ required: true, message: '请输入邮箱', trigger: 'blur' }]">-->
<!--              <el-input v-model="registerForm.email" placeholder="输入邮箱"></el-input>-->
<!--            </el-form-item>-->

            <el-form-item label="电话号码" :rules="[{ required: true, message: '请输入电话号码', trigger: 'blur' }]">
              <el-input v-model="registerForm.phone" placeholder="输入电话号码"></el-input>
            </el-form-item>

<!--            <el-form-item label="性别" :rules="[{ required: true, message: '请选择性别', trigger: 'change' }]">-->
<!--              <el-select v-model="registerForm.gender" placeholder="选择性别">-->
<!--                <el-option label="男" value="Male"></el-option>-->
<!--                <el-option label="女" value="Female"></el-option>-->
<!--                <el-option label="其他" value="Other"></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->

<!--            <el-form-item label="生日" :rules="[{ required: true, message: '请选择生日', trigger: 'change' }]">-->
<!--              <el-date-picker v-model="registerForm.birth" type="date" placeholder="选择生日"></el-date-picker>-->
<!--            </el-form-item>-->

<!--            <el-form-item label="地区" :rules="[{ required: true, message: '请输入地区', trigger: 'blur' }]">-->
<!--              <el-input v-model="registerForm.region" placeholder="输入地区"></el-input>-->
<!--            </el-form-item>-->

<!--            <el-form-item label="工作" :rules="[{ required: true, message: '请输入工作', trigger: 'blur' }]">-->
<!--              <el-input v-model="registerForm.job" placeholder="输入工作"></el-input>-->
<!--            </el-form-item>-->

            <el-form-item label="密码" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
              <el-input v-model="registerForm.password" type="password" placeholder="输入密码"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="handleRegister" :loading="loading" style="width: 100%">注册</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useAuthStore } from '@/stores/auth';
import { useRouter } from 'vue-router';
import instance from "@/utils/http";

const form = ref({
  username: '',
  password: '',
  type: "user"
});

const registerForm = ref({
  userId: null,
  email: '',
  machineCode: '',
  username: '',
  phone: '',
  gender: '',
  birth: '',
  region: '',
  job: '',
  points: 0,
  password: ''
});

const loading = ref(false);
const activeTab = ref('login'); // 默认激活登录选项卡
const authStore = useAuthStore();
const router = useRouter();

const resetForm = () => {
  form.value = { username: '', password: '', type: "user" };
  registerForm.value = {
    userId: null,
    email: '',
    machineCode: '',
    username: '',
    phone: '',
    gender: '',
    birth: '',
    region: '',
    job: '',
    points: 0,
    password: ''
  };
};

const handleLogin = async () => {
  loading.value = true;
  try {
    const response = await instance.post('/auth/login', form.value, {
      headers: { type: "user" }
    });
    const { data, code, message } = response.data;
    if (code !== 200) {
      ElMessage.error(message);
      return;
    }
    authStore.setToken(data.username);
    authStore.setUid(data.id);
    localStorage.setItem('token', data.username);
    ElMessage.success('登录成功');
    router.push('/');
  } catch (error) {
    ElMessage.error('登录失败，请检查您的凭证');
  } finally {
    loading.value = false;
  }
};

const handleRegister = async () => {
  loading.value = true;
  try {
    const response = await instance.post('/auth/register', registerForm.value);
    const { code, message } = response.data;
    if (code !== 200) {
      ElMessage.error(message);
      return;
    }
    ElMessage.success('注册成功');
    activeTab.value = 'login'; // 切换回登录选项卡
  } catch (error) {
    ElMessage.error('注册失败，请重试');
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url('bacg.jpg'); /* 替换为您的背景图片 URL */
  background-size: cover;
  background-position: center;
}

.login-card {
  width: 400px;
  padding: 40px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-button {
  margin-top: 10px;
}
</style>
